<template>
  <div id="TeamUser">
    <div class="form--inline">
      <p>队伍名称</p>
      <el-input v-model="teamData.teamName"></el-input>
    </div>
    <el-button @click="addUser" type="primary" icon="el-icon-folder-add">添加成员</el-button>
    <el-table :data="teamData.userList" border stripe>
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="角色名称" prop="roleName" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{row}">
          <el-button type="danger" size="mini" icon="el-icon-circle-close" @click="removeUser(row)">移出团队</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" icon="el-icon-folder" @click="submitUpdate">保存更新</el-button>
    <el-dialog
      title="选择用户"
      :visible.sync="dialogVisible"
      :destroy-on-close="true"
      width="40%"
    >
      <div style="display: flex;justify-content: center;align-items: center;flex-direction: column">
        <vxe-table
          ref="userTable"
          :data="userList"
          style="width: 100%"
          border
          stripe
          :height="300"
          auto-resize
          :checkbox-config="{ checkMethod: checkboxMethod }"
        >
          <vxe-table-column type="checkbox" width="55"></vxe-table-column>
          <vxe-table-column title="用户名" field="username" align="center"></vxe-table-column>
          <vxe-table-column title="角色" field="roleName" align="center"></vxe-table-column>
        </vxe-table>
        <el-button type="primary" @click="saveUser2Team">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listTeam, updateTeam } from '@/api/team'
import { listUser } from '@/api/user'

export default {
  name: 'TeamUser',
  data() {
    return {
      teamData: {},
      dialogVisible: false,
      userList: []
    }
  },
  mounted() {
    this.getTeamData()
  },
  methods: {
    getTeamData() {
      const that = this
      listTeam().then(res => {
        that.teamData = res.data.list.find(t => t.id === Number(this.$route.params.id))
      })
      listUser().then(res => {
        this.userList.splice(0, this.userList.length, ...res.data.list)
      })
    },
    addUser() {
      this.dialogVisible = true
    },
    removeUser(row) {
    },
    saveUser2Team() {
      this.teamData.userList.push(...this.$refs.userTable.getCheckboxRecords())
      this.dialogVisible = false
    },
    checkboxMethod({ row }) {
      return this.teamData.userList.findIndex(u => u.id === row.id) < 0
    },
    submitUpdate() {
      updateTeam(this.teamData).then(res => {
        if (res.resultCode === 200) {
          this.$message.success('操作成功')
        }
        this.$router.push('/team/index')
      })
    }
  }
}
</script>

<style scoped lang="scss">
#TeamUser {
  margin: 10px;

  .el-button {
    margin: 0 auto;
  }
}

.form--inline {
  p {
    text-align: center;
    min-width: 120px;
  }

  display: flex;
}
</style>
